
// jquery的页面加载函数
$(function() {
        // 获取cookie的username，如果cookie中的username有值，则表示用户已经登录，否则未登录
        var username = getCookie('username');
        var login = document.querySelector('.login');
        if(username){
          // 用户已经登录，在顶部导航栏，显示用户的信息，及显示退出按钮
          var str = `<li><a>欢迎尊贵的<span>${username}</span>VIP来到旅游网站！</a></li>
          <li><a href="javascript:;" class="logout">退出</a></li>`;
          login.innerHTML = str;
          // 退出功能,点击退出
          var logout = document.querySelector('.logout');    
          logout.onclick = function(){
            // 使用layer的confirm弹出层，展示 确定 和 取消 的选项
            layer.confirm('你确定要退出吗？',{ btn:['确定','取消'] },
              // 第一个 确定 按钮点击触发的函数
              function(){
                // 删除cookie，退出登录状态
                delCookie('username');
                login.innerHTML = `<li><a href="denglu.html">登陆</a></li>
                <li><a href="zhuce.html">注册</a></li>`;
                layer.msg('退出成功',{icon:1,time:500})
              },
              // 第二个 取消 按钮 点击触发的函数
              function(){
                layer.msg('已取消',{icon:1,time:500})
                return false;
              }
            )
          }
        }
document.querySelector('.btn').onclick=function(){
    layer.open({
        type: 2,
        title: false,
        area: ['1000px', '500px'],
        shade: 0.8,
        closeBtn: 0,
        shadeClose: true,
        content: 'http://7xtcwd.com1.z0.glb.clouddn.com/%E3%80%8A%E5%88%9D%E5%BF%83%E3%80%8B%E2%80%94%E5%8D%83%E9%94%8B%E5%8D%81%E5%91%A8%E5%B9%B4%E5%93%81%E7%89%8C%E4%BB%B7%E5%80%BC%E8%A7%82%E7%89%87-.mp4'
      });
      layer.msg('点击任意处关闭');
}
  var loadindex = layer.load( {
      shade: [0.5, '#333']
  })
  $.ajax({
      url: '../serves/list.php',
      dataType: 'json',
      success(res) {
        //   获取到所有景点的信息
        var data = res.data;
        //   console.log(data);
        // 每一页给四个数据
          var pageSize = 8;
          new Page("page", {
              language: {
                  first: '首页',
                  prev: '上一页',
                  next: '下一页',
                  last: '尾页'
              },
              pageData: {
                  pageSize,
                  total: data.length
              },
              show: function(currentPage) {
                  var tmp = data.slice((currentPage - 1) * pageSize, currentPage * pageSize)
                  console.log(tmp);
                  var html = '';
                  tmp.forEach(v => {
                      html += `
                          <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
                              <div class="thumbnail">
                                  <img src="${v.imgpath.split('========')[0]}" alt="...">
                                  <div class="caption">
                                      <h3>${v.name}</h3>
                                      <p class="introduce">${v.introduce}/</p>
                                      <p>
                                          <a href="javascript:;" class="btn btn-default" role="button" style="border-radius:5px;background:#596275;opacity:0.5;color:white;" id="look">查看详情</a>
                                          <a href="detail.html?id=${v.id}" class="btn btn-default" role="button" style="margin-left:65px;border-radius:5px;background:#3742fa;opacity:0.5;color:black;">点击购买</a>
                                      </p>
                                  </div>
                              </div>
                          </div>
                      `                   
                  })
                  $('.scenics').html(html)
                  tmp.forEach(v => {
                  document.querySelector('#look').onclick=function(){
                    layer.open({
                        type: 1,
                        title:'详情介绍',
                        skin: 'layui-layer-rim', //加上边框
                        area: ['600px', '300px'], //宽高
                        content: `${v.introduce}`
                      });
                  }
                })
              }             
          })
          setTimeout(function(){
            layer.close(loadindex);
          }, 2000);
      }
  })
})
